﻿@page "/collapse"

<h1>Collapse</h1>

<div class="docs-example">
    <BSButton Color="Color.Primary" @onclick="onclick">Toggle</BSButton>
    <BSCollapse IsOpen="@IsOpen">
        <BSCard CardType="CardType.Card">
            <BSCard CardType="CardType.Body">
                <BSCard CardType="CardType.Text">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</BSCard>
            </BSCard>
        </BSCard>
    </BSCollapse>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/collapse/collapse1.html" />

<h3>Alternate syntax</h3>
<BSCollapseItem>
    <BSCollapseToggle Color="Color.Primary">
        @(context ? "Hide" : "Show")
    </BSCollapseToggle>
    <BSCollapse>
        <BSCard CardType="CardType.Card">
            <BSCard CardType="CardType.Body">
                <BSCard CardType="CardType.Text">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</BSCard>
            </BSCard>
        </BSCard>
    </BSCollapse>
</BSCollapseItem>
<PrettyCode CodeFile="_content/SampleCore/snippets/collapse/collapse2.html" />

<h3>Accordion example</h3>
<div class="accordion">
    <BSCollapseGroup>
        @for (int i = 0; i < 5; i++)
        {
            int number = i + 1;
            <BSCollapseItem @key="@i">
                <BSCard CardType="CardType.Card">
                    <BSCard CardType="CardType.Header">
                        <BSCollapseToggle IsLink="true">Collapsable Group Item #@number</BSCollapseToggle>
                    </BSCard>
                    <BSCollapse>
                        <BSCard CardType="CardType.Body">
                            <BSCard CardType="CardType.Text">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</BSCard>
                        </BSCard>
                    </BSCollapse>
                </BSCard>
            </BSCollapseItem>
        }
    </BSCollapseGroup>
</div>
<PrettyCode CodeFile="_content/SampleCore/snippets/collapse/collapse3.html" />

@code {
    bool IsOpen { get; set; }
    void onclick(MouseEventArgs e)
    {
        IsOpen = !IsOpen;
        StateHasChanged();
    }
}